<template>
  <div class="height-100">
    <div v-if="dataBool" :id="id" style="width:100%;height:100%"></div>
    <div v-else>
      <el-empty description="暂无项目"></el-empty>
    </div>
  </div>

</template>
<script>
// import { getPublicIndicatorStatistics } from '@/api/manage/leadCockpit/index'
import * as echarts from 'echarts'
export default {
  props: {
    id: String
  },
  data() {
    return {
      dataBool: false
    }
  },
  mounted() {
  },
  methods: {
    initECharts(data) {
      this.myCharts = echarts.init(document.getElementById(this.id))
      this.option = {
        color: ['#F7B500', '#44D7B6', '#0091FF', '#6236FF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '80px',
          left: '24px',
          right: '24px',
          bottom: '0px',
          containLabel: true
        },
        legend: {
          data: ['前期', '在建', '暂缓', '竣工'],
          top: '10px',
          left: '8px'
        },
        xAxis: [
          {
            type: 'category',
            data: data.projectTypeList,
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.45)',
              interval: 0,
              // rotate: 10,
              fontSize: '1.4rem'
              // formatter: function(name) {
              //   return (name.length > 9 ? (name.slice(0, 9) + '...') : name)
              // }
            }
          }
        ],
        yAxis: {
          type: 'value',
          name: '(个)',
          axisLabel: {
            color: 'rgba(0, 0, 0, 0.45)',
            fontSize: '1.4rem'
          },
          nameTextStyle: {
            fontSize: '1.4rem',
            color: 'rgba(0, 0, 0, 0.45)'
          }
        },
        series: [
          {
            name: '前期',
            type: 'bar',
            barWidth: 12,
            barGap: '1px',
            stack: 'sum',
            data: data.qqList
          },
          {
            name: '在建',
            stack: 'sum',
            type: 'bar',
            barGap: '1px',
            barWidth: 12,
            data: data.zjList
          },
          {
            name: '暂缓',
            stack: 'sum',
            type: 'bar',
            barGap: '1px',
            barWidth: 12,
            data: data.zhList
          },
          {
            name: '竣工',
            stack: 'sum',
            type: 'bar',
            barGap: '1px',
            barWidth: 12,
            data: data.jgList
          }
        ]
      }
      this.myCharts.setOption(this.option, true)
      window.addEventListener('resize', () => {
        this.myCharts.resize()
      })
    }

  }
}
</script>
<style>
</style>
